<template>
  <div class="swiper-box">
    <img class="swiper-box-img" :src="publicUrls + 'customized/zjz/homebanner2.png'" alt="" />
    <img @click="scrollHome" class="swiper-box-btn" :src="publicUrls + 'customized/zjz/homebanner3.png'" alt="" />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { urls } from '@/utils/request/upload';
import { ref, onMounted, onUnmounted, nextTick, onActivated, onDeactivated } from 'vue';
import arrowLeft from './arrowLeft.vue';
import arrowRight from './arrowRight.vue';
import dotIcon from './dotIcon.vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const webUrl: string = '?imageView2/1/format/webp';
const swiperHeight = ref(0);
const swiperWidth = ref(0);
const current = ref(0);
const timer = ref(null);
const moveNoActive = ref(false);
const props = defineProps({
  bannerList: {
    type: Array,
  },
});
// const bannerListWithDuplicate = [...props.bannerList, props.bannerList[0]];
const bannerListWithDuplicate = [...props.bannerList];
const change = (currents: number, context: any) => {
  current.value = currents;
};

const addCruuent = (e: number) => {
  var dom = document.getElementsByClassName('van-swipe__track')[0];
  if (e === 2) {
    if (current.value == props.bannerList.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = props.bannerList.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
  dom.style.transform = 'translateX(-' + current.value * window.innerWidth + 'px)';
  dom.style.transition = 'all 0.5s';
};
const changeCurrent = (index: number) => {
  current.value = index;
  var dom = document.getElementsByClassName('van-swipe__track')[0];
  dom.style.transform = 'translateX(-' + current.value * window.innerWidth + 'px)';
  dom.style.transition = 'all 0.5s';
};
const pathHref = (e?: string) => {
  if (e) {
    window.open(e);
  }
};
const getShow = (index) => {
  if (index === current.value) {
    return true;
  }
  if (index === current.value + 1) {
    return true;
  }
  if (current.value == props.bannerList.length - 1 && index === 0) {
    return true;
  }
  return false;
};
// window.addEventListener('resize', () => {
//   swiperWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
//   swiperHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//   //   console.log('屏幕宽度：' + swiperWidth.value);
//   //   console.log('屏幕高度：' + swiperHeight.value);
// });
const scrollHome = () => {
  store.homeCurrent = 0;
  pathChilds();
};
const getListElements = () => {
  return document.querySelectorAll('.hw-unit-box-selct-i');
};
const pathChilds = (e: number, item: any, index: number, isChild: Boolean) => {
  nextTick(() => {
    if (store.homeCurrent === -1) {
      return;
    }
    const elements = getListElements();
    const element = elements[store.homeCurrent];
    if (element) {
      // 滚动选项
      const options = {
        behavior: 'smooth',
        block: 'start',
      };

      // 高亮效果

      // nextTick(() => {
      // 滚动到元素
      element.scrollIntoView(options);

      // });
    }
  });
};
swiperWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
swiperHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
</script>

<style lang="less" scoped>
.swiper-box {
  position: relative;
  width: 100%;
  height: 100vh;
  // height: 500px;
  .swiper-box-img {
    width: 100vw;
    height: 100vh;
  }
}
.swiper-box-btn {
  position: absolute;
  bottom: 26px;
  left: 117px;
  width: 142px;
  height: 40px;
  object-fit: contain;
  z-index: 3;
}
</style>
